import { initExecute } from '../../../_resource/common/utils/index.js';
import { _ProPager } from '../../../config.js';
export default (hook, { Pagination }) => {
	return {
		isJiess: true,
		name: 'ProPager',
		setup({ midder }) {
			const { $ref, $watchEffect } = hook.$m;
			const { pager, proxy, table } = midder;
			const layoutRef = $ref();
			// ====================================================
			const cnf = initExecute.call(this)(_ProPager, [midder], {})
			const { layout = 'total, sizes, prev, pager, next', ...pagerProps } = cnf;
			// 采用同步数据更新方案，初始无参数值，可以触发观察器
			// 在观察到数据变化后，会在第一时间触发更新，而此刻代理值还未发生变化，
			// 因此使用第一时间提供的变化参数作为变动值，保障同步数据的更新
			$watchEffect((value = proxy.pageSize) => {
				pager.values.pageSize = value;
			}, { model: 'sync' });
			$watchEffect((value = proxy.currentPage) => {
				pager.values.page = value;
			}, { model: 'sync' });
			$watchEffect((value = proxy.layout || layout) => {
				layoutRef.value = value
			}, { model: 'sync' });
			// 重置当前页和每页数量
			pager.reset = () => {
				// 重置为在utils中采集到的初始默认值
				proxy.pageSize = pager.defaultPageSize || 10;
				proxy.currentPage = pager.defaultPage || 1;
			}
			// ====================================================
			this.add({
				is: Pagination,
				// 长度为0，则不显示分页组件
				layout: { $proxy: layoutRef },
				$if: { $proxy: proxy, field: 'total' },
				total: { $proxy: proxy, field: 'total' },
				'page-size': { $proxy: proxy, field: 'pageSize' },
				'page-sizes': { $proxy: proxy, field: 'pageSizes' },
				'current-page': { $proxy: proxy, field: 'currentPage' },
				onSizeChange: (num) => {
					pager.values.pageSize = num;
					proxy.pageSize = num;
					table.reload();
				},
				onCurrentChange: (num) => {
					pager.values.page = num;
					proxy.page = num;
					table.reload();
				},
				...pagerProps,
				...pager.pagerProps,
			});
		},
	};
}